<template>
    <el-pagination class="my-2"
        v-model:current-page="paginationParams.page"
        v-model:page-size="paginationParams.pageSize"
        :hide-on-single-page="paginationParams.pageSize===config.page_sizes[0]"
        :background="config.background"
        :disabled="config.disabled"
        :small="config.small"
        :layout="config.layout"
        :total="paginationParams.total"
        :page-sizes="config.page_sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
</template>

<script setup lang="ts">
import type {paginationConfigType, paginationParamsType} from "./type"
import {reactive} from "vue";

const config = reactive(<paginationConfigType>{
    background: true,
    small: false,
    disabled: false,
    layout: "total, sizes, prev, pager, next",
    page_sizes: [10, 20, 50, 100],
})

defineProps<{
    // config: paginationConfigType
    paginationParams: paginationParamsType
}>()
const emit = defineEmits<{
    pageChange: [num: number]
    pageSizeChange: [num: number]
}>()
// 页码改变
const handleCurrentChange = (val: number) => {
    emit("pageChange", val)
}
// 页数改变
const handleSizeChange = (val: number) => {
    emit("pageSizeChange", val)
}
</script>
